<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <title>平台管理场馆</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <!--条件查询-->
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="查询">
                    <el-input v-model="condition" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
<!--                    <el-button type="primary" @click="upload">修改</el-button>-->
                </el-form-item>
            </el-form>
            <!--展示我的场馆-->
            <el-table :data="venue" border>

                <el-table-column align="center" label="场馆图片" width="140px">
                    <template slot-scope="scope" align="center">
                                <span>
                                    <img @click="bigger(scope.row.link)" :src="scope.row.link"
                                         style="width: 100px;height: 100px;">
                                </span>
                    </template>
                </el-table-column>
                <el-table-column prop="venueId" label="ID" v-if='false'>
                </el-table-column>
                <el-table-column prop="name" label="场馆名称">
                </el-table-column>
                <el-table-column prop="accountName" label="场馆账号">
                </el-table-column>
                <el-table-column prop="address" label="场馆地址">
                </el-table-column>
                <el-table-column prop="longitude" label="经度">
                </el-table-column>
                <el-table-column prop="latitude" label="纬度">
                </el-table-column>
                <el-table-column prop="phone" label="场馆电话">
                </el-table-column>
                <el-table-column prop="email" label="场馆邮箱">
                </el-table-column>
                <el-table-column prop="state" label="状态">
                </el-table-column>
                <!--                <el-table-column prop="message" label="驳回原因">-->
                <!--                </el-table-column>-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.state=='可用'" @click="del(scope.row)" type="text" size="small">禁用</el-button>
                        <el-button v-show="scope.row.state=='不可用'" @click="start(scope.row)" type="text" size="small">启用</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="场馆图片"
                       :visible.sync="showBigImg"
                       width="300px">
                <img :src="bigImg"
                     style="width: 250px;height: 250px;">

            </el-dialog>

            <!--分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.currentPage"
                        :page-sizes="[3, 4]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                pageInfo: {
                    currentPage: 1,// 当前页
                    size: 3,// 每页多少条
                    total: 1// 总条目数
                },
                showBigImg: false,
                bigImg: "",
                venue: [],//所有场馆信息
                condition: ""
            }
        },
        methods: {
            // 分页 - 更改每页条数
            handleSizeChange(val) {
                this.pageInfo.size = val
                this.query();
            },
            // 分页 - 更改当前页
            handleCurrentChange(val) {
                this.pageInfo.currentPage = val
                this.query();
            },
            bigger(row) {
                this.bigImg = row
                this.showBigImg = true
                console.log(row)
            },
            query() {
                axios.get("/venue/venueGet?condition=" + this.condition + "&current=" + this.pageInfo.currentPage + "&size=" + this.pageInfo.size).then(resp => {
                    if (resp.status === resp.data.code) {
                        console.log(resp.data.data)
                        this.venue = resp.data.data.records
                        this.pageInfo.total = resp.data.data.total
                    }
                })
            },
            del(row) {
                axios.post("/venue/venueDel?id=" + row.venueId).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        alert("禁用成功")
                        this.query()
                    }
                })
            },
            start(row) {
                axios.post("/venue/venueStart?id=" + row.venueId).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        alert("启用成功")
                        this.query()
                    }
                })
            }
        },
        created() {
            this.query()
        }
    })
</script>
</body>
</html>